<div class="animated fadeIn">
  <div class="card card-accent-default">
    <div class="card-header">Calednar</div>
    <div class="card-block">
      <div class="row text-center">
        <div class="col-md-4">
          <div class="btn-group">
            <div class="btn btn-outline-secondary" (click)="decrement()">
              Previous
            </div>
            <div class="btn btn-primary" (click)="today()">
              Today
            </div>
            <div class="btn btn-outline-secondary" (click)="increment()">
              Next
            </div>
          </div>
        </div>
        <div class="col-md-4 text-center">
          <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
        </div>
        <div class="col-md-4">
          <div class="btn-group float-right">
            <div class="btn btn-primary" (click)="view = 'month'" [class.active]="view === 'month'">Month</div>
            <div class="btn btn-primary" (click)="view = 'week'" [class.active]="view === 'week'">Week</div>
            <div class="btn btn-primary" (click)="view = 'day'" [class.active]="view === 'day'">Day</div>
          </div>
        </div>
      </div>
      <br>
      <div [ngSwitch]="view">
        <mwl-calendar-month-view
          *ngSwitchCase="'month'"
          [viewDate]="viewDate"
          [events]="events"
          [activeDayIsOpen]="activeDayIsOpen"
          (dayClicked)="dayClicked($event.day)">
        </mwl-calendar-month-view>
        <mwl-calendar-week-view
          *ngSwitchCase="'week'"
          [viewDate]="viewDate"
          [events]="events">
        </mwl-calendar-week-view>
        <mwl-calendar-day-view
          *ngSwitchCase="'day'"
          [viewDate]="viewDate"
          [events]="events">
        </mwl-calendar-day-view>
      </div>
    </div>
  </div>
</div>
